<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>MENU FOOD</title>
<link rel="stylesheet" href="../../css/bootstrap/bootstrap.css"
	th:href="@{/css/bootstrap/bootstrap.css}" />
<script src="../../js/jquery-1.11.2.js" th:src="@{/js/jquery-1.11.2.js}"></script>
<script type="text/javascript" src="../../js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script>
<style>
@font-face {
	font-family: 'Glyphicons Halflings';
	src: url('../fonts/glyphicons-halflings-regular.eot');
	src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')
		format('embedded-opentype'),
		url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
		url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
		url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular')
		format('svg');
}
}
</style>
<script type="text/javascript">
	function validateMenuFoodName() {
		var div = document.getElementById("error");
		while (div.hasChildNodes()) {
			div.removeChild(div.childNodes[0]);
		}
		var menuFoodName = document.forms["menufood"]["menuFoodName"].value;
		var textError = null;
		var check = true;
		if (menuFoodName == null || menuFoodName == "") {
			textError = "Menufood name must be filled out";
			addElements(div, textError);
			check = false;
		}
		if (checkExistMenuFoodName() == true) {
			textError = "Menufood name has existed!";
			addElements(div, textError);
			check = false;
		}

		return check;
	}

	function addElements(div, textError) {
		var dv = document.createElement("DIV");
		dv.setAttribute("class", "alert alert-danger");
		var sp1 = document.createElement("SPAN");
		sp1.setAttribute("class", "glyphicon glyphicon-exclamation-sign");
		dv.appendChild(sp1);
		var text = document.createTextNode(textError);
		dv.appendChild(text);
		div.appendChild(dv);
	}

	function checkExistMenuFoodName() {
		var flag = false;
		$.ajax({
			"type" : "GET",
			"async" : false,
			"url" : "/core-web-admin/menufood/isexisted",
			"data" : {
				"restaurantId" : $('#restaurantId').val(),
				"menuFoodName" : $('#menuFoodName').val()
			},
			"success" : function(data) {
				if (data == "true") {
					flag = true;
				}
				if (data == "false") {
					flag = false;
				}
			},
			"error" : function(data) {
				alert("ERROR WHEN CHECK EXISTED MENU FOOD NAME!");
				flag = false;
			}
		});
		return flag;
	}

	function updateMenuName() {
		$.ajax({
			"type" : "POST",
			"async" : false,
			"url" : "/core-web-admin/menufood/update",
			"data" : {
				"menuFoodId" : $('#foodId').val(),
				"menuFoodName" : $('#foodName').val()
			},
			"complete" : function() {
				location.reload();
			}
		});
	}

	function deleleMenuName(resId, mfId) {
		$.ajax({
			"type" : "POST",
			"async" : false,
			"url" : "/core-web-admin/menufood/delete",
			"data" : {
				"restaurantId" : resId,
				"menuFoodId" : mfId
			},
			"complete" : function() {
				window.location.reload();
			}
		});
	}
	
	function createFormUpdate() {
		$.ajax({
			"type" : "GET",
			"async" : false,
			"url" : "/core-web-admin/menufood/formupdate",
			"data" : {
				"menuFoodId" : 10,
				"menuFoodName" : "hello"
			}
		});
	}
</script>
</head>
<body>
	<header></header>
	<nav class="navbar navbar-inverse">
		<div class="container-fluid">
			<div>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#"><span class="glyphicon glyphicon-search"></span>Sign
							Up</a></li>
					<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
							Login</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<section>
		<article class="container col-sm-10 col-sm-offset-1">
			<div id="error"></div>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Menu Food</a></li>
				<li class="active">Information Menu Food</li>
			</ol>
			<div class="panel panel-success">
				<div class="panel-heading">INFORMATION MENU FOOD MANAGEMENT</div>
				<div class="panel-body">
					<form id="menufood" name="menufood" method="post"
						th:action="@{/menufood/add}"
						class="form-horizontal container col-sm-10 col-sm-offset-1">
						<input type="hidden" id="restaurantId" name="restaurantId"
							th:value="${menuFood.restaurantId}" />
						<div class="form-group">
							<label class="control-label col-sm-3" for="restaurantName">Restaurant
								Name:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="restaurantName"
									name="restaurantName" readonly="readonly"
									placeholder="Enter restaurant name"
									th:value="${menuFood.restaurantName}" />
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-sm-3" for="menuFoodName">Menu
								Name:</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="menuFoodName"
									th:value="${menuFood.menuFoodName}" name="menuFoodName"
									placeholder="Enter menu name" />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-3 col-sm-2">
								<button class="btn btn-primary glyphicon glyphicon-backward">Back</button>
							</div>
							<div class="col-sm-offset-4 col-sm-1">
								<button type="submit" onclick="return validateMenuFoodName();"
									class="btn btn-primary glyphicon glyphicon-new-window">Add</button>
							</div>
						</div>
					</form>
					<div th:unless="${#lists.isEmpty(list)}">
						<table class="table table-hover">
							<thead>
								<tr>
									<th>Menu Food Name</th>
									<th>Update</th>
									<th>Delete</th>
								</tr>
							</thead>
							<tbody>
								<tr th:each="menufood : ${list}">
									<td th:text="${menufood.menuFoodName}"></td>
									<td><a th:href="@{/menufood/formupdate(restaurantId=${menufood.restaurantId}, restaurantName=${menufood.restaurantName}, menuFoodId=${menufood.menuFoodId}, menuFoodName=${menufood.menuFoodName})}"><button
									 class="btn btn-primary glyphicon glyphicon-edit">Update</button></a></td>
									<td><button
											th:onclick="'javascript:deleleMenuName(\'' + ${menufood.restaurantId} + '\', \'' + ${menufood.menuFoodId} + '\');'"
											class="btn btn-primary glyphicon glyphicon-trash">Delete</button></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="panel-footer">
				</div>
			</div>
		</article>
	</section>
	<footer class="container col-sm-12" style="margin-top: 250px;">
		<ol class="breadcrumb text-center">
			<li class="active"><p>@copyright - University Of Information
					Technology - Spring + hibernate + css3 + html5</p></li>
		</ol>
	</footer>
</body>
</html>